<template>
    <view class="com-water-g">
        <view class="l m">
            <view class="item" v-for="(item, index) in l" :key="index">
                <mx-wateritem :info="item" @imgLoad="(val) => imgLoad(val, 'l')" />
            </view>
        </view>
        <view class="r m">
            <view class="item" v-for="(item, index) in r" :key="index">
                <mx-wateritem :info="item" @imgLoad="(val) => imgLoad(val, 'r')" />
            </view>
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const props = defineProps({
    goods: {
        type: [Array, Object],
        default: [],
    }
})
let lh = 0, rh = 0, ll = [], rl = []


const data = reactive({
    goodsList: [],
    l: [],
    r: [],
})

const { l, r } = toRefs(data)


let is_set_height = ref(false)
function imgLoad(val, type) {
    if (is_set_height.value) {
        if (lh <= rh) {
            lh += val
            if (data.goodsList.length > 0) data.l.push(data.goodsList.shift())
        } else {
            rh += val
            if (data.goodsList.length > 0) data.r.push(data.goodsList.shift())
        }
    }
}



function getList(goods, pn) {
    
    if (pn == 1) {
        is_set_height.value = false
        let l = [], r = [];
        lh = 0
        rh = 0
        goods.forEach((item, index) => {
            if (index < goods.length - 1) {
                if (index % 2 == 0) {
                    l.push(item)
                } else {
                    r.push(item)
                }
            }
        })
        data.l = l;
        data.r = r;

        data.goodsList = goods.slice(goods.length - 1, goods.length)
        setTimeout(() => {
            const query = uni.createSelectorQuery().in(proxy)
            query
                .selectAll(".m")
                .boundingClientRect((res) => {
                    lh = res[0] && res[0].height
                    rh = res[1] && res[1].height
                    is_set_height.value = true
                    imgLoad(0, 'l')
                })
                .exec()
        }, 500)



    } else {
        data.goodsList = data.goodsList.concat(goods.slice(0, goods.length - 1))
        imgLoad(0, 'l')

        setTimeout(() => {
            const query = uni.createSelectorQuery().in(proxy)
            query
                .selectAll(".m")
                .boundingClientRect((res) => {
                    lh = res[0] && res[0].height
                    rh = res[1] && res[1].height
                    data.goodsList = goods.slice(goods.length - 1, goods.length)
                    is_set_height.value = true
                    imgLoad(0, 'l')
                })
                .exec()
        }, 1500)
    }

}

defineExpose({ getList })



</script>

<style lang="scss" scoped>
.com-water-g {
    width: 100%;
    padding: 0 20rpx;
    overflow: hidden;
}

.l {
    float: left;
    width: 50%;
    padding-right: 10rpx;

}

.r {
    float: left;
    width: 50%;
    padding-left: 10rpx;
}
.item {
    background: #ffffff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    position: relative;
}
</style>
